<template>
  <div id="orderinner">
    <div class="iotdetail" @click="editLogistics()">
      <div class="iottip"></div>
      <div class="iotinfo">
        <p class="iotcustom">收货人：{{addressobj.name}}  {{addressobj.phone}}</p>
        <p class="iotaddress">收货地址：{{addressnames + ' ' + addressobj.address}}</p>
      </div>
    </div>
    <div class="orderview">
      <div class="poitem" v-for="iitem in productinfolist">
        <div class="poleft">
          <img :src="iitem.img" alt="">
        </div>
        <div class="poright">
          <div class="porl"><p class="potitle">{{iitem.title}}</p></div>
          <div class="porr"><p class="poprice">{{iitem.price}}积分</p><p class="ponums">&Chi;{{iitem.num}}</p></div>
        </div>
      </div>
    </div>
    <div class="pototal">
      共{{productinfolist.length}}件商品　合计：<span>{{totalprice}}积分</span>　（快递：免运费）
    </div>
    <div v-if="productinfolist.length > 0" class="submitOrder" @click="buySubmit()">提交订单</div>
    <toast v-model="showtoast">提交成功</toast>
    <toast :is-show-mask="true" :time="10000" v-model="ordertoast">订单生成中...</toast>
    <toast v-model="warntoast" type="cancel">{{warntoasttext}}</toast>
    <div transfer-dom>
      <alert v-model="erralert">{{erralerttext}}</alert>
    </div>
  </div>
</template>

<script>
  import { Alert, Toast, ChinaAddressV3Data, Value2nameFilter as value2name, TransferDomDirective as TransferDom } from 'vux'
  export default{
    name: 'orderinner',
    components: {
      Alert,
      Toast,
      ChinaAddressV3Data,
      TransferDom
    },
    data () {
      return {
        showtoast: false,
        warntoast: false,
        erralert: false,
        ordertoast: false,
        warntoasttext: '',
        erralerttext: '',
        addressnames: '',
        addressobj: {},
        productinfolist: [],
        totalprice: 0
      }
    },
    created () {
      this.$axios.post(this.apidomain + '/api/integralMall/addressMaintain/' + this.getCookie('appid'), {
        openId: this.getCookie('openid'),
        province: '',
        city: '',
        district: '',
        name: '',
        phone: '',
        address: ''
      })
      .then((response) => {
        this.addressobj = response.data.data
        // 转化地址
        this.addressnames = this.getName([this.addressobj.province, this.addressobj.city, this.addressobj.district])
      })
      const pid = this.$route.query.id || ''
      const pnum = this.$route.query.num || 0
      if (pid === '') {
        // 说明是从购物车结算
        let buycarstr = JSON.parse(this.getCookie('buycarsubmit'))
        buycarstr = buycarstr === null ? [] : buycarstr
        buycarstr.forEach((item) => {
          if (parseInt(item[0].num) > 0) {
            // 单个商品结算
            this.$axios.post(this.apidomain + '/api/integralMall/queryProductInfoDetail/' + this.getCookie('appid'), {
              openId: this.getCookie('openid'),
              id: item[0].id
            })
            .then((response) => {
              response.data.data.num = item[0].num
              this.totalprice += item[0].num * response.data.data.price
              this.productinfolist.push(response.data.data)
            })
          }
        })
      } else {
        // 单个商品结算
        this.$axios.post(this.apidomain + '/api/integralMall/queryProductInfoDetail/' + this.getCookie('appid'), {
          openId: this.getCookie('openid'),
          id: pid
        })
        .then((response) => {
          response.data.data.num = pnum
          this.totalprice = response.data.data.price * response.data.data.num
          this.productinfolist.push(response.data.data)
        })
      }
      setTimeout(() => {
        if (this.productinfolist.length < 1) {
          this.warntoasttext = '暂无商品'
          this.warntoast = true
        }
      }, 1000)
    },
    methods: {
      buySubmit: function () {
        if (this.addressobj.phone === '') {
          window.alert('请先完善地址信息')
          window.zhuge.track('Click', {
            '事件名称': '会员中心-积分商城-热门兑换商品-兑换-编辑收货地址-点击',
            'OpenID': this.getCookie('openid'),
            '点击时间': (new Date().toLocaleString())
          }, () => {
            this.routeto('logistics')
          })
          return false
        }
        let sdata = []
        let clearbuycarlist = []
        this.productinfolist.forEach((item) => {
          sdata.push({
            'id': item.id,
            'num': item.num
          })
          clearbuycarlist.push(item.id)
        })
        this.ordertoast = true
        this.$axios.post(this.apidomain + '/api/integralMall/saveConfirmOrder/' + this.getCookie('appid'), {
          data: sdata,
          openId: this.getCookie('openid'),
          name: this.addressobj.name,
          phone: this.addressobj.phone,
          address: this.addressobj.address,
          province: this.addressobj.province,
          city: this.addressobj.city,
          district: this.addressobj.district
        })
        .then((response) => {
          this.ordertoast = false
          if (response.data.errorCode === '0') {
            this.showtoast = true
            // 从全部购物车列表中去出已提交的购物车列表
            let oldbuycarstr = JSON.parse(this.getCookie('buycarlist'))
            oldbuycarstr = oldbuycarstr === null ? [] : oldbuycarstr
            for (let i = 0; i < oldbuycarstr.length; i++) {
              if (clearbuycarlist.indexOf(oldbuycarstr[i][0].id) > -1) {
                oldbuycarstr.splice(i, 1)
              }
            }
            this.setCookie('buycarlist', JSON.stringify(oldbuycarstr))
            setTimeout(() => { this.routeto('orderdetail', {id: response.data.data.id}) }, 500)
          } else {
            this.erralerttext = response.data.errorMsg
            this.erralert = true
          }
        })
      },
      getName (value) {
        return value2name(value, ChinaAddressV3Data)
      },
      editLogistics () {
        window.zhuge.track('Click', {
          '事件名称': '会员中心-积分商城-热门兑换商品-兑换-编辑收货地址-点击',
          'OpenID': this.getCookie('openid'),
          '点击时间': (new Date().toLocaleString())
        }, () => {
          this.routeto('logistics')
        })
      }
    }
  }
</script>
<style lang="less">
@import '../assets/less/order/orderinner.less';
</style>
